<template>
  <div>
    <ClassSelector ref="selector"></ClassSelector>
    <div v-if="isSelectReady">
      <div>
        <el-table
          stripe
          :data="stuList"
          style="width: 100%">
          <el-table-column label="学生名称" prop="studentName" sortable></el-table-column>
          <el-table-column label="学号" prop="studentId" sortable></el-table-column>
          <el-table-column label="专业" prop="major" sortable></el-table-column>
          <el-table-column label="学院" prop="college" sortable></el-table-column>
          <el-table-column label="入学年份" prop="enrollmentYear" sortable></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import tc from '../../store/teacher'
import ClassSelector from "./utilComp/ClassSelector";

import axios from "axios";
import qs from 'qs';

export default {
  name: "StuManage",
  components: {ClassSelector},
  mounted() {

  },
  computed: {
    isSelectReady() {
      return tc.getters.getIsSelectReady
    },
    chosenClass() {
      return tc.getters.getChosenClass
    },
    stuList: {
      get() {
        return tc.getters.getStuList
      },
      set(v) {
        tc.commit('setStuList', v)
      }
    },

  },
  data() {
    return {
      chosenCourse: '',
    }
  },
  watch: {
    isSelectReady(newVal, oldVal) {
      if (newVal) {
        axios.post('/api/getStudentsByClassId', qs.stringify({courseId: this.chosenClass.courseId}))
          .then(res1 => {
            console.log(res1, '学生列表')
            this.stuList = res1.data.studentsList
          })
      }
    }
  },
  methods: {}
}
</script>

<style scoped>

</style>
